<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Acid Test on the table values of the 'display' property</title>
<link rel="author" title="Gabriele Romanato" href="mailto:gabriele.romanato@gmail.com"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="flags" content="Valid" />
<meta name="assert" content="Visual UA should support the values of the 'display' property related to tables"/>
 
<style type="text/css" media="screen">

#face {
	font-size: 10px;
	width: 15em;
	height: 15em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -7.5em 0 0 -7.5em;
}

.row {
	display: table;
	height: 1em;
}

.pix {
	width: 1em;
	height: 1em;
	display: table-cell;
}

.black {
	background-color: black;
}

.green {
	background-color: #6c6;
}

.white {
	background-color: white;
}

.five, .nine, .eleven, .thirtheen {
	margin: 0 auto;
}

.five {width: 5em;}
.nine {width: 9em;}
.eleven {width: 11em;}
.thirtheen {width: 13em;}

.fiftheen {width: 15em;}

</style>

</head>

<body>

<p>Please compare your result with the <a href="reference.png">reference rendering</a>.</p>

<div id="face">

	<div class="row five">
	
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
	</div>
	
	<div class="row nine">
	
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row eleven">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row thirtheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row thirtheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	<div class="row fiftheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row fiftheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row fiftheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row fiftheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row fiftheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row thirtheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	
	<div class="row thirtheen">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix white"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	
	<div class="row eleven">
	
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
	</div>
	
	<div class="row nine">
	
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix green"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
	</div>
	
	<div class="row five">
	
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
		<div class="pix black"></div>
	</div>
	

</div>

</body>
</html>
